<template>
  <view class="box" :class="{ noLoad: !isLoading }">
    <view class="mask" v-if="isMask"></view>
    <view class="loading_box" @click="isNo">
      <view class="closeView" @click="closeViewFun">
        <u-icon name="close" color="#999" size="28rpx"></u-icon>
      </view>
      <!-- <view class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </view> -->
      <view class="loadingImageView">
        <!-- <image
          src="https://qsb-resource.oss-cn-shanghai.aliyuncs.com/sz-img/xsjLoading.gif?v=3"
        /> -->
        加载中
      </view>
      <view v-if="loadingText" class="loadingText">{{ loadingText }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    closeViewFun() {
      // this.$closeLoading();
    },
    isNo() {
      // this.$closeLoading();
    },
  },
  //实测直接在标签属性里写  $store.state.XX  拿不到数据  所以这里通过 计算属性去监听一下
  computed: {
    isLoading() {
      return this.$store.state.loading;
    },
    loadingText() {
      return this.$store.state.loadingText;
    },
    isMask() {
      return this.$store.state.mask;
    },
  },
};
</script>

<style lang="scss" scoped>
.noLoad {
  visibility: hidden;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10076 !important;
  background-color: rgba(1, 1, 1, 0);
}
.loading_box {
  position: fixed;
  z-index: 10077 !important;
  min-width: 110rpx;
  top: 50%;
  left: 50%;
  padding: 26rpx;
  border-radius: 14rpx;
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  box-shadow: 0px 0px 30rpx 10rpx #e6e6e680;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .closeView {
    border-radius: 10rpx;
    padding: 4rpx;
    background-color: #f9f9fb;
    position: absolute;
    right: 6rpx;
    top: 6rpx;
  }

  .loadingImageView {
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
.loadingText {
  text-align: center;
  font-size: 20rpx;
  color: #434343;
  font-weight: bold;
  margin-top: 16rpx;
}
.loading {
  width: 90rpx;
  height: 76rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    display: inline-block;
    width: 8rpx;
    height: 100%;
    background: #fff;
    border-radius: 20rpx;
    -webkit-animation: actionLoad 1s ease infinite;
    animation: actionLoad 1s ease infinite;

    &:last-child {
      margin-right: 0;
    }

    &:nth-child(2) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    &:nth-child(3) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    &:nth-child(4) {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }
    &:nth-child(5) {
      -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }
  }

  @keyframes actionLoad {
    0%,
    100% {
      height: 60%;
      background: #fff;
    }
    50% {
      height: 100%;
      margin: -15rpx 0;
      background: rgb(255, 239, 239);
    }
  }
}
</style>
